<style lang="less">
    .main {
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        text-align: center;
        .head{
            top: 0;
        }
        .main-content{
            width: 100%;
            position: absolute;
            //top: 60px;
            top: 0;
            left: 0;
            display: flex;
            bottom: 0;
            .main-left{
                width: 200px;
                background: rgb(73, 80, 96);
                //max-width: 200px;
                min-width: 200px;
                max-height: 100%;
                overflow-y: auto;
                transition: all .3s;
            }
            ::-webkit-scrollbar {
                width: 4px;
                border-radius: 2px;
            } /* 这是针对缺省样式 (必须的) */
            ::-webkit-scrollbar-thumb {
                background-color: rgba(192,192,192, 0.6);
            } /* 滑块颜色 */
            .main-right{
                flex-grow: 1;
                position: relative;
                overflow: hidden;
                transition: all .3s;
                .rightcontent{
                    position: absolute;
                    top: 100px;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    overflow-x: hidden;
                    overflow-y: auto;
                    background: #f0f0f0;
                }
            }
        }
    }
</style>
<template>
    <div class="main">
        <div class="head">
            <div class="main-content">
                <div class="main-left" :style="{width: menutoogle ? '200px' : '100%'}">
                    <menu-list :activename="currentTagName" @on-select="onSelect" @menuToggleClick="menuToggleClick" :menutoggle="menutoogle"></menu-list>
                </div>
                <div class="main-right" v-show="menutoogle">
                    <main-head @menuToggleClick="menuToggleClick"></main-head>
                    <head-tag ref="headTag"
                              :tagdata="tagdata"
                              :sytagdata="sytagdata"
                              :currentTagName="currentTagName"
                              @tag-click="tagClick"
                              @tag-close-all="tagCloseAll"
                              @tag-close-other="tagCloseOther"
                              @on-close="onClose">

                    </head-tag>
                    <div class="rightcontent">
                        <keep-alive :include="cachePage">
                            <router-view class="main-content-item"></router-view>
                        </keep-alive>
                    </div>
                    <spin size="large" fix v-if="spinShow"></spin>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import mainHead from './main_conponents/mainHead.vue'
    import headTag from './main_conponents/headTag.vue'
    import menuList from './main_conponents/menuList.vue'
    import Cookies from 'js-cookie'
    import menudata from './main_conponents/menuData.js'
    export default {
        data () {
            return {
                menutoogle: false,
                spinShow: this.$store.state.spinShow,
                vuegConfig:{  //  进场动画
                    forwardAnim:'zoomIn',  //options所有配置可以写在这个对象里，会覆盖全局的配置
                    backAnim: 'zoomOut',
                    disable:false              //对于嵌套路由，默认为关闭动画，需要在组件的data.vuegConfig中配置disable为false启用
                },
                currentTagName: this.$store.state.currentTagName,  //  当前选中的tag页
                currentitem: null,
                sytagdata: {
                    name: '首页',
                    id: 'sy',
                    url: '#'
                },
                tagdata: this.$store.state.tagdata  //  tag标签
                //cachePage: []   //  缓存页面数组
            }
        },
        watch: {
            '$store.state.spinShow': {
                handler: function (val, oldVal) {
                    this.spinShow = val;
                },
                deep: true
            },
            '$store.state.currentTagName': {
                handler: function (val, oldVal) {
                    if (this.sytagdata.id == val) {
                        this.currentTagName = val
                        this.$router.push({
                            name: val
                        });
                        return
                    }
                    let tagdata = this._.find(this.tagdata, (tagdata) => {
                        return tagdata.id == val
                    });
                    console.log('current', tagdata)
                    if (tagdata) {
                        if (tagdata.type) {
                            this.$router.push({
                                path: tagdata.url
                            });
                        } else {
                            this.$router.push({
                                name: val
                            });
                        }
                    }
                    this.currentTagName = val
                    Cookies.set('currentTagName', val)
                    Cookies.set('tagdata', this.tagdata)
                },
                deep: true
            },
            '$store.state.tagdata': {
                handler: function (val, oldVal) {
                    this.tagdata = val
                },
                deep: true
            }
        },
        computed: {
            cachePage () {  //  需要缓存的界面
                let cachepage = []
                cachepage.push('basicproduct')
                cachepage.push(this.sytagdata.id)
                this._.forEach(this.tagdata, function(n, key) {
                    cachepage.push(n.id)
                });
                return cachepage
            }
        },
        methods: {
            menuToggleClick (toggle) {
                //console.log('dianji')
                if (toggle == null) {
                    this.menutoogle = !this.menutoogle
                } else {
                    this.menutoogle = toggle
                }
            },
            tagClick (item) {  //  标签点击事件
                console.log(item)
                if (item.id === this.currentTagName) {
                    return
                }
                this.$store.commit('setCurrentTagName', item.id)
                //  this.currentTagName = item.id
            },
            onClose (name) { //  标签关闭事件
                let tagdata = this.tagdata
                let index = this._.findIndex(tagdata, (chr) => {
                    return chr.id === name;
                });
                tagdata.splice(index, 1)
                this.$store.commit('setTagdata', tagdata)
                if (this.currentTagName === name) {
                    if (tagdata.length === 0) {
                        this.$store.commit('setCurrentTagName', this.sytagdata.id)
                        return
                    }
                    this.$store.commit('setCurrentTagName', this._.last(tagdata).id)
                }
            },
            tagCloseAll () {
                this.$store.commit('setTagdata', [])
                this.$store.commit('setCurrentTagName', this.sytagdata.id)
            },
            tagCloseOther () {
                let index = this._.find(this.tagdata, (n) => {
                    return n.id === this.currentTagName;
                });
                this.$store.commit('setTagdata', [index])
            },
            onSelect (menuitem) {  //  菜单点击
                //this.tagToggle(menuitem)
                this.util.switchHeadTag(this, menuitem, this.tagdata)
            }
        },
        components: {
            mainHead,
            headTag,
            menuList
        },
        mounted: function () {
            this.http.getAllBaseMsg(this, {})
            console.log(this.$store.state.role, 'main')
            if (this.$store.state.currentTagName) {  //  判断store是否又当前选中值   有则认为是登录   没有认为是刷新页面
                //  this.currentTagName = this.$store.state.currentTagName
                return
            }
            //  刷新页面时数据从cookies里恢复
            let currentTagName = Cookies.get('currentTagName')
            let tagdata = Cookies.get('tagdata')
            let role = sessionStorage.getItem('role').split(',');
            this.$store.commit('setRole', role)
            this.$store.commit('setUid', sessionStorage.getItem('id'))
            this.$store.commit('setName', sessionStorage.getItem('name'))
            console.log(role, 'role')
            if (currentTagName) {
                //  this.currentTagName = currentTagName
                this.$store.commit('setCurrentTagName', currentTagName)
            }
            if (tagdata) {
                this.$store.commit('setTagdata', JSON.parse(tagdata))
                //  this.tagdata = JSON.parse(tagdata)
            }
        }
    };
</script>
